{% extends 'admin/common/base.html' %}
{% block body %}
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="role-form">
					<div class="select-list">
						<ul>
							<li>
								角色名称：<input type="text" name="name"/>
							</li>
							<li>
								角色状态：<select name="status">
									<option value="">所有</option>
									<option value="0">正常</option>
									<option value="1">停用</option>
								</select>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
		
			<div class="btn-group-sm" id="toolbar" role="group">
				<a class="btn btn-success {{check_perms('sys:role:add')}}" onclick="$.operate.add()">
	                <i class="fa fa-plus"></i> 新增
	            </a>
	            <a class="btn btn-primary single disabled {{check_perms('sys:role:edit')}}" onclick="$.operate.edit()">
		            <i class="fa fa-edit"></i> 修改
		        </a>
				<a class="btn btn-danger multiple disabled {{check_perms('sys:role:remove')}}" onclick="$.operate.removeAll()">
		            <i class="fa fa-remove"></i> 删除
		        </a>
	        </div>
	        
	        <div class="col-sm-12 select-table table-striped">
			    <table id="bootstrap-table"></table>
			</div>
		</div>
	</div>
</body>
{% endblock %}
{% block js %}
{{ super() }}
<script>
    var editFlag = "";
    var removeFlag = "";
    var prefix = "system/role";
    var editFlag = "{{check_perms('sys:role:edit')}}";
    var removeFlag = "{{check_perms('sys:role:remove')}}";

    $(function() {
        var options = {
            url: "{{url_for('admin.sys.role.list')}}",
            createUrl: "{{url_for('admin.sys.role.add')}}",
            updateUrl: "{{url_for('admin.sys.role.edit')}}?id={id}",
            removeUrl: "{{url_for('admin.sys.role.remove')}}?id={id}",
            exportUrl: prefix + "/export",
            sortName: "roleSort",
            modalName: "角色",
            columns: [{
                checkbox: true
            },
            {
                field: 'id',
                title: '角色编号'
            },
            {
                field: 'name',
                title: '角色名称',
                sortable: true
            },
            {
                field: 'key',
                title: '权限字符',
                sortable: true
            },
            {
                field: 'sort',
                title: '显示顺序',
                sortable: true
            },
            {
                visible: editFlag == 'hidden' ? false : true,
                title: '角色状态',
                align: 'center',
                formatter: function (value, row, index) {
                    return statusTools(row);
                }
            },
            {
                field: 'ctime',
                title: '创建时间',
                sortable: true
            },
            {
                title: '操作',
                align: 'center',
                formatter: function(value, row, index) {
                    var actions = [];
                    actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                    actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                    var more = [];
                    more.push("<a class='btn btn-default btn-xs " + editFlag + "' href='javascript:void(0)' onclick='authDataScope(" + row.id + ")'><i class='fa fa-check-square-o'></i>数据权限</a> ");
                    more.push("<a class='btn btn-default btn-xs " + editFlag + "' href='javascript:void(0)' onclick='authUser(" + row.id + ")'><i class='fa fa-user'></i>分配用户</a>");
                    //actions.push('<a tabindex="0" class="btn btn-info btn-xs" role="button" data-container="body" data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" data-content="' + more.join('') + '"><i class="fa fa-chevron-circle-right"></i>更多操作</a>');
                    return actions.join('');
                }
            }]
        };
        $.table.init(options);
    });
    
    /* 角色管理-分配数据权限 */
    function authDataScope(roleId) {
        var url = prefix + '/authDataScope/' + roleId;
        $.modal.open("分配数据权限", url);
    }
    
    /* 角色管理-分配用户 */
    function authUser(roleId) {
        var url = prefix + '/authUser/' + roleId;
        $.modal.openTab("分配用户", url);
    }
    
    /* 角色状态显示 */
    function statusTools(row) {
        if (row.status == 1) {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-on text-info fa-2x\"></i> ';
        }
    }
    
    /* 角色管理-停用 */
    function disable(roleId) {
        $.modal.confirm("确认要停用角色吗？", function() {
            $.operate.post(prefix + "/changeStatus", { "roleId": roleId, "status": 1 });
        })
    }

    /* 角色管理启用 */
    function enable(roleId) {
        $.modal.confirm("确认要启用角色吗？", function() {
            $.operate.post(prefix + "/changeStatus", { "roleId": roleId, "status": 0 });
        })
    }
</script>
{% endblock %}
